<script lang="ts">
export default {
  name: 'Study5StuDemo1'
}
</script>

<template>
  <h2>计算属性</h2>
  <div class="note">
    <h3>1. 计算属性 VS 模板字符串计算</h3>
    <p>(1) 计算属性可以做一些更复杂的逻辑计算</p>
    <p>(2) 计算属性是响应性的，当依赖的属性发生变化时，计算属性会自动重新计算</p>
    <p>(3) 计算属性会被缓存，只有其依赖的数据变化时才会重新计算，大大提高了性能</p>
  </div>

  <div class="note">
    <h3>2. 计算属性 VS 自定义函数</h3>
    <p>(1) 计算属性可以做一些更复杂的逻辑计算</p>
    <p>(2) 计算属性是响应性的，当依赖的属性发生变化时，计算属性会自动重新计算</p>
    <p>(3) 计算属性具有缓存机制，减少不必要的浪费，提高性能</p>
  </div>

  <div class="note">
    <h3>3. 计算属性性质</h3>
    <p>(1) 默认只读，格式通常为直接返回一个函数，返回返回值</p>
    <p>(2) 可写计算属性，在 computed 中同时包含 get 和 set 方法</p>
    <p>(3) computed()可以接受的形式主要有两种：</p>
    <p>       ·一个返回值的函数(只读)</p>
    <p>       ·一个包含 get 和 set 方法的对象(可读可写)</p>

  </div>
  <hr class="hr-style" />
  <p>模板字符串计算</p>
  <div class="test">
    <p>
      在模板中计算：
      {{ author.books.length > 1 ? author.books.join('-') : author.books[0] }}
    </p>
  </div>

  <hr class="hr-style" />
  <p>计算属性</p>
  <div class="test">
    计算属性：
    {{ computedBooks }}
  </div>

  <hr class="hr-style" />
  <p>计算属性 VS 自定义函数</p>
  <div class="test">
    <div v-for="item in 5" :key="item">
      {{ computedBooks }}
    </div>
    <div v-for="item in 5" :key="item">
      {{ funcBooks() }}
    </div>
  </div>
  <input type="text" v-model="bookName" />
  <button type="button" @click="addNewBook">新加一本书</button>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'

const author = reactive({
  name: 'John',
  books: ['小王子', '让富婆爱上我', '让高富帅爱上我']
})

const bookName = ref('')

const addNewBook = () => {
  try {
    if (!bookName.value) {
      throw new Error('请输入书的名字')
    }
    author.books.push(bookName.value)
  } catch (error) {
    alert((error as Error).message)
  }
}

// 计算属性
const computedBooks = computed(() => {
  console.log('computed被调用，结果重新计算')
  return author.books.length > 1 ? author.books.join('-') : author.books[0]
})

// 自定义函数
function funcBooks() {
  console.log('自定义函数被调用，结果重新计算')
  return author.books.length > 1 ? author.books.join('-') : author.books[0]
}

// 可写计算属性
const canEditBooks = computed({
  get: ()=>{
    return author.books.length > 1 ? author.books.join('-') : author.books[0]
  },
  set: (value)=>{
    console.log(value);
    author.books = [...author.books,value]
  }
})

canEditBooks.value = '重生之我是harmonyOS高手'
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
